<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>笔记的图片库</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<style>

    #allImg img {
        width: 100px;
    }
</style>
<body>
<div id="allImg">
        <el-button type="text" @click="open">批量删除</el-button>
    <el-table
            ref="multipleTable"
            :data="imgList"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                label="id"
                width="120">
            <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column
                prop="file_name"
                label="文件名字"
                width="120">
        </el-table-column>
        <el-table-column
                prop="file_size"
                label="文件大小"
                >
        </el-table-column>
        <el-table-column
                prop="file_path"
                label="文件图片服务器上的路径"
                >
        </el-table-column>
        <el-table-column
                prop="file_path"
                label="图片预览"
        >
        <template slot-scope="scope">
            <a  :href="['getPic?path=' + scope.row.file_path]">
                <img  :src="['getPic?path=' + scope.row.file_path]" alt="">
            </a>
        </template>

        </el-table-column>
    </el-table>
    <div class="block">
        <el-pagination
            layout="prev, pager, next"
            :total="imgListCount"
            :page-size="10"
            @current-change="currentPage">
        </el-pagination>
    </div>
    



</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="./js/axios.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>


    new Vue({
        el: "#allImg",
        data: {
            imgList: [],
            multipleSelection: {},
            imgListCount:100,
        },
        computed: {
            addSrc (item) {
               return 'getPic?' + item;
            }
        },
        mounted: function () {
            var self = this;
            axios({
                method: "Get",
                url: "/getAllImg",
                params: {
                    page:'0',
                    pageSize:'10'
                }
            }).then(function(resp) {
                console.log(resp.data.data);
                self.imgList = resp.data.data;
            }).catch(function (resp) {
                console.log(resp)
                console.log("请求失败");
            });
            axios({
                method: "Get",
                url: "/queryFileListCount",
            }).then(function(resp) {
                console.log(resp.data.data[0].count);
                self.imgListCount = resp.data.data[0].count;
            }).catch(function (resp) {
                console.log(resp)
                console.log("请求失败");
            });
        },
        methods:{
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                console.log(val)
                this.multipleSelection = this.tansformDelVal(val);
            },
            tansformDelVal(val) {
                var arr = []
                var arr1 = []
                val.forEach(function(ele,index){
                    arr.push(ele.id)
                    arr1.push(ele.file_path)
                })
                var str = arr.join(',')
                return {
                    ids:str,
                    imgPath:arr1
                };
            },
            open() {
                var self = this;
                this.$alert('确定删除吗', '提醒', {
                    confirmButtonText: '确定',
                    callback: action => {
                        console.log(action)
                        var that = this;
                        if(action == 'confirm'){
                            axios({
                                method: "POST",
                                url: "/delImg",
                                data:self.multipleSelection
                            }).then(function(resp) {
                                console.log(resp.data.data);
                                // window.location.reload();
                                that.$message({
                                    type: 'success',
                                    message: `删除成功`
                                });
                            }).catch(function (resp) {
                                console.log(resp)
                                console.log("请求失败");
                            });
                        }


                    }
                });
            },
            currentPage(value){
                var self = this;
                console.log(value)
                var curIndex = value -1;
                axios({
                    method: "Get",
                    url: "/getAllImg",
                    params: {
                        page:curIndex,
                        pageSize:'10'
                    }
                }).then(function(resp) {
                    console.log(resp.data.data);
                    self.imgList = resp.data.data;
                }).catch(function (resp) {
                    console.log(resp)
                    console.log("请求失败");
                });
            }
        }
    });


</script>
</body>
</html>